<template>
    <div>
        <div id="mainM5" style="width: 100%;height:6.25rem;"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { RequestStatisticGetMaterialByWarehouse } from "@/api/path/index.js";

// 基于准备好的dom，初始化echarts实例
// 绘制图表
onMounted(() => {
    const dataArr = ref<any>([])
    const qitaAll = ref<any>(0)
    RequestStatisticGetMaterialByWarehouse(1).then((res: any) => {
        res.resultObj.各原材料累计出库.forEach((item: any) => {
            if (item.name == '铜') {
                dataArr.value.push({
                    name: '铜',
                    value: item.value
                })
            } else {
                qitaAll.value += item.value
            }
        });
        dataArr.value.push({
            name: '其他',
            value: qitaAll.value
        })
        var chartDom = document.getElementById('mainM5');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            color: ['#135efc', '#e8f2ff'],
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['60%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                        // fontSize:'40',
                    },
                    labelLine: {
                        show: false
                    },
                    data: dataArr.value
                }
            ]
        };
        option && myChart.setOption(option);
    })
})
</script>
<style lang="scss" scoped></style>